/* RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
	-webkit-transition-duration: 500ms;
	overflow:hidden;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
:focus {
	outline: 0;
}
/* HTML5 tags */
header, section, footer,
aside, nav, article {
	display: block;
}

html {
	width: 100%;
	height: 100%;
	background: rgb(215, 215, 215);
	background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(rgb(240, 240, 240)), to(rgb(190, 190, 190)));
	background: -webkit-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
	background:    -moz-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
	background:     -ms-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
	background:      -o-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
	background:         radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); 
}

#localUserId {
	font-family : 'Arial Black';
	font-size : 35px;
}

#divStatus {
	position:absolute;
}

#toolsPanel {
	position:fixed;
	top:0px;
	left:0px;
	background:rgba(255,255,255,0.5);
	min-width:20%;
}

#backTable {
	box-shadow: 0 2px 6px rgba(0,0,0, .5),
	0 1px rgba(255,255,255, .3) inset,
	0 10px rgba(255,255,255, .2) inset,
	0 10px 20px rgba(255,255,255, .25) inset,
	0 -15px 30px rgba(0,0,0, .3);
 position:absolute;
 width: 100%;
 height: 100%;
 margin: 0 auto;
 -webkit-transform-style: preserve-3d;
 -webkit-transform: translateZ(-200px) perspective(20px); /* Pushes 3D object back into place */
 -webkit-transition: all 2s ease-in-out;  /* Enables transitions for transforms */
 
}

#topLeftBox {
 display:inline-block;
 float:left;
 background:rgba(0,175,255,0.1);
 width: 20%;
 height: 20%;
 margin: 0 0 auto auto;
}
#topRightBox {
 float:right;
 background:rgba(0,175,255,0.1);
 width: 20%;
 height: 20%;
 margin: 0 auto auto 0;
}
#bottomLeftBox {
 float:left;
 background:rgba(0,175,255,0.1);
 width: 20%;
 height: 20%;
 margin: auto 0 0 auto;
}
#bottomRightBox {
 float:right;
 background:rgba(0,175,255,0.1);
 width: 20%;
 height: 20%;
 margin: auto 0 auto 0;
}
#centerBox {
 float:bottom;
 width: 60%;
 height: 60%;
 margin: auto auto 0 auto;
}
#topBox {
 float:top;
 background:rgba(255,175,0,0.5);
 width: 60%;
 height: 20%;
 margin: 0 auto auto auto;
 border-radius: 10px;
	box-shadow: 0 2px 6px rgba(0,0,0, .5),
	0 1px rgba(255,255,255, .3) inset,
	0 10px rgba(255,255,255, .2) inset,
	0 10px 20px rgba(255,255,255, .25) inset,
	0 -15px 30px rgba(0,0,0, .3);
	font-family: 'Arial Black';
	font-size : 35px;
}
#leftBox {
 background:rgba(255,175,0,0.5);
 float:left;
 width: 20%;
 height: 60%;
 margin: auto 0 auto auto;
 border-radius: 10px;
	box-shadow: 0 2px 6px rgba(0,0,0, .5),
	0 1px rgba(255,255,255, .3) inset,
	0 10px rgba(255,255,255, .2) inset,
	0 10px 20px rgba(255,255,255, .25) inset,
	0 -15px 30px rgba(0,0,0, .3);
	font-family: 'Arial Black';
	font-size : 35px;
}
#rightBox {
 float:right;
 background:rgba(255,175,0,0.5);
 width: 20%;
 height: 60%;
 margin: auto auto auto 0;
 border-radius: 10px;
	box-shadow: 0 2px 6px rgba(0,0,0, .5),
	0 1px rgba(255,255,255, .3) inset,
	0 10px rgba(255,255,255, .2) inset,
	0 10px 20px rgba(255,255,255, .25) inset,
	0 -15px 30px rgba(0,0,0, .3);
	font-family: 'Arial Black';
	font-size : 35px;
}
#bottomBox {
 float:bottom;
 background:rgba(255,175,0,0.5);
 width: 60%;
 height: 20%;
 margin: auto auto 0 auto;
 border-radius: 10px;
	box-shadow: 0 2px 6px rgba(0,0,0, .5),
	0 1px rgba(255,255,255, .3) inset,
	0 10px rgba(255,255,255, .2) inset,
	0 10px 20px rgba(255,255,255, .25) inset,
	0 -15px 30px rgba(0,0,0, .3);
	font-family: 'Arial Black';
	font-size : 35px;
}



#container {
 width: 950px;
 margin: 0 auto;
}

#slideshow {
 width: 950px;
 margin: 50px auto 0 auto;
 padding: 50px 0 0 0;
 -webkit-perspective: 700; /* triggers a 3D space */
}

figure {
 display: inline;
 -webkit-transform-style: preserve-3d; /* maintains 3D space */
}

#box {
 position: relative;
 display: block;
 width: 900px;
 height: 400px; 
 -webkit-transform: translateZ(-200px); /* Pushes 3D object back into place */
 -webkit-transition: -webkit-transform 250ms;  /* Enables transitions for transforms */
}
 
#box div {
	position: absolute;
	top: 0;
	left: 0;
	box-shadow: 0 2px 6px rgba(0,0,0, .5),
	0 1px rgba(255,255,255, .3) inset,
	0 10px rgba(255,255,255, .2) inset,
	0 10px 20px rgba(255,255,255, .25) inset,
	0 -15px 30px rgba(0,0,0, .3);
}

#box div  img{
	z-index:0;
}

figcaption {
 display: inline-block;
 width: 0px;
 height: 0px;
 background: rgba(0,0,0,0.0);
 cursor: pointer;
 
 position: relative;
 top: 0px;
 left: 0px;
 margin: 0 30px 0 0;
 
 -moz-transition: all 0.1s linear;
 -o-transition: all 0.1s linear;
 -webkit-transition: all 0.1s linear;
 transition: all 0.1s linear;  
}
 
figcaption:hover {
 background: rgba(0,0,0,0.8); 
}

#box div:nth-child(1) {
 -webkit-transform: rotateX(0deg) translateZ(200px);
}

#box div:nth-child(2) {
 -webkit-transform: rotateX(180deg) translateZ(200px);
}

#box div:nth-child(3) {
 -webkit-transform: rotateX(90deg) translateZ(200px);
}

#box div:nth-child(4) {
 -webkit-transform: rotateX(-90deg) translateZ(200px);
}

#box div:nth-child(5) {
 -webkit-transform: rotateY(-90deg) translateZ(200px);
}

#box div:nth-child(6) {
 -webkit-transform: rotateY(90deg) translateZ(700px);
}

#fig1:focus #box {
 -webkit-transform: translateZ(-200px) rotateY(0deg);
}

#fig2:focus #box {
 -webkit-transform: translateZ(-200px) rotateY(-10deg); 
}

#fig3:focus #box {
 -webkit-transform: translateZ(-200px) rotateY(10deg);
}

#fig4:focus #box {
 -webkit-transform: translateZ(-200px) rotateX(10deg);
}

#fig5:focus #box {
 -webkit-transform: translateZ(-200px) rotateX(-10deg);
}

#fig6:focus #box {
 -webkit-transform: translateZ(-200px) rotateX(0deg);
}

/*

#fig2:focus #box {
 -webkit-transform: translateZ(-200px) rotateX(-180deg);
}

#fig3:focus #box {
 -webkit-transform: translateZ(-200px) rotateX(-90deg);
}

#fig4:focus #box {
 -webkit-transform: translateZ(-200px) rotateX(90deg);
}

#fig5:focus #box {
 -webkit-transform: translateZ(-2o0px) rotateY(90deg);
}

#fig6:focus #box {
 -webkit-transform: translateZ(-200px) rotateY(-90deg);
}

*/


.faceStyle1{
	background-color: rgba(0,175,255,0.5);
}

.faceStyle2{
	
}

.faceStyle3{

}

.faceStyle4{

}

.faceStyle5{

}

.faceStyle6{

}

.frameStyle{

}

.finger{
	position:absolute;
	top:0px;
	left:0px;
	display:none;
}

.finger1{
	background:rgba(255,0,0,0.5);
}

.finger2{
	background:rgba(0,255,0,0.5);
}

.finger3{
	background:rgba(0,0,255,0.5);
}

.finger4{
	background:rgba(255,255,0,0.5);
}

.finger5{
	background:rgba(0,255,255,0.5);
}

.circle {
	width: 40px;
	height: 40px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	background:rgba(70,212,70,0.3);
	vertical-align: middle;
	font-family: 'Arial Black';
	font-size : 35px;
	text-align : 'center';
}

.categorizedElement{
	top:0px;
	left:0px;
	display:none;
}